import React from 'react';
import { Balloon, Button, Card, Icon } from '@alifd/next';
import { Chart, Geom, Axis, Legend } from 'bizcharts';

import styles from './index.module.scss';

interface ChartItem {
  type?: string;
  value?: number;
  category?: string;
}

interface CardConfig {
  title?: string;
  hint?:string;
  chartData?: ChartItem[];
  chartHeight?: number;
}

const DEFAULT_DATA: CardConfig = {
  title: '期刊阅读趋势图',
  hint:'欢迎查看期刊阅读趋势',                 //提示信息
  chartData: [
    { category: '6月', value: 1231, type: '月刊阅读量' },
    { category: '6月', value: 1112, type: '月刊互动量' },
    { category: '6月', value: 1213, type: '子刊阅读量' },
    { category: '7月', value: 2312, type: '月刊互动量' },
    { category: '8月', value: 3213, type: '子刊阅读量' },
    { category: '9月', value: 2344, type: '月刊阅读量' },
    { category: '10月', value: 3425, type: '月刊互动量' },
    { category: '11月', value: 4326, type: '子刊阅读量' },
    { category: '12月', value: 3227, type: '月刊阅读量' },
    { category: '1月', value: 2118, type: '月刊互动量' },
    { category: '2月', value: 1139, type: '子刊阅读量' },
    { category: '3月', value: 4351, type: '月刊阅读量' },
    { category: '4月', value: 5432, type: '月刊互动量' },
    { category: '5月', value: 3333, type: '子刊阅读量' },
  ],
  chartHeight: 500,
};

export interface FusionCardGroupBarChartProps {
  cardConfig?: CardConfig;
}

const FusionCardGroupBarChart: React.FunctionComponent<FusionCardGroupBarChartProps> = (props: FusionCardGroupBarChartProps): JSX.Element => {
  const {
    cardConfig = DEFAULT_DATA,
  } = props;

  const { title, chartData, chartHeight, hint} = cardConfig;
//提示信息
const content = (<div><p>{hint}</p></div>);
const MoveTarget = <Button size="small" type="primary" style={{margin: '5px'}}><Icon type="atm" /></Button>;
  return (
    <Card free className={styles.FusionCardGroupBarChart}>
      <Card.Header title={<span>
        {title}
        <Balloon trigger={MoveTarget} triggerType="hover">
            {content}
        </Balloon>
      </span>} />
      <Card.Divider />
      <Card.Content>
        <Chart renderer="canvas" forceFit width={10} height={chartHeight} data={chartData} padding={['80', 'auto']}>
          <Axis name="category" />
          <Axis name="value" />
          <Legend
            textStyle={{
              fill: '#666',
              fontSize: 14,
            }}
          />
          <Geom
            type="interval"
            position="category*value"
            color="type"
            adjust={[
              {
                type: 'dodge',
                marginRatio: 1 / 16,
              },
            ]}
          />
        </Chart>
      </Card.Content>
    </Card>
  );
};

export default FusionCardGroupBarChart;
